<!--
 * @Date: 2022-11-08 17:35:29
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-19 13:27:56
 * @FilePath: \vue-admin-ts\src\views\main\components\NavMenu\index.vue
 * @Description: nav-menu
-->
<template>
  <div class="nav_menu_container">
    <div class="logo">
      <img class="img" src="~@/assets/img/logo.svg" alt="logo" />
      <span class="title">VVT-Admin</span>
    </div>
    <my-infinit-menu
      :data="userMenus"
      @click-item="clickItem"
      class="el-menu-vertical"
      background-color="#0c2135"
      text-color="#b7bdc3"
      active-text-color="#0a60bd"
      :defaultActive="defaultActive"
      unique-opened
      :collapse="!collapseFlag"
    ></my-infinit-menu>
  </div>
</template>
<script lang="ts" setup>
import MyInfinitMenu from "@/components/menu/menu";
import { computed, onMounted, ref } from "vue";
import { useStore } from "@/store";
import cloneDeep from "lodash/cloneDeep";
import { useRoute, useRouter } from "vue-router";
import { pathMapToMenu } from "@/utils/mapMenus";
const props = defineProps({
  collapseFlag: {
    type: Boolean,
    default: true,
  },
});
const store = useStore();
const router = useRouter();
const route = useRoute();
const defaultActive = ref("");
const userMenus = computed(() => changeMenu(store.state.loginModule.userMenus));
const changeMenu = (arr: any[]) => {
  const idToParent = new Map();
  const stack: any[] = [];
  const cloneArr = cloneDeep(arr);
  cloneArr.map((item) => {
    const { id } = item;
    item.index = `${id}`;
    if (item.icon) {
      item.icon = item.icon.split("-")[2];
    }
    idToParent.set(id, item);
    if (item.children) {
      stack.push(...item.children);
    }
    while (stack.length) {
      const curNode = stack.pop();
      if (curNode.type === 2) {
        delete curNode.children;
      }
      idToParent.set(curNode.id, curNode);
      const parentNode = idToParent.get(curNode.parentId);
      if (curNode.icon) {
        curNode.icon = curNode.icon.split("-")[2];
      }
      if (parentNode) {
        curNode.index = `${parentNode.index}-${curNode.id}`;
      }
      if (curNode.children) {
        stack.push(...curNode.children);
      }
    }
  });
  return cloneArr;
};
onMounted(() => {
  const curMenu = pathMapToMenu(userMenus.value, route.fullPath);
  defaultActive.value = curMenu.index;
});
const clickItem = (item: any) => {
  console.log("父组件", item);
  router.push({
    path: item.url ?? "/notFound",
  });
};
</script>
<style lang="less" scoped>
.nav_menu_container {
  height: 100%;
  background-color: #001529;

  .logo {
    display: flex;
    height: 28px;
    padding: 12px 10px 8px 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .img {
      height: 100%;
      margin: 0 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: white;
    }
  }
  :deep(.el-menu) {
    border-right: none;
    .el-sub-menu {
      background-color: #001529 !important;
      // 二级菜单 ( 默认背景 )
      .el-menu-item {
        padding-left: 50px !important;
        background-color: #0c2135 !important;
        &.is-active {
          color: #fff !important;
          background-color: #0a60bd !important;
        }
        &:hover {
          color: #fff !important; // 菜单
        }
      }
    }
  }
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 100%;
    height: calc(100% - 48px);
  }
}
</style>
